<template>
  <!-- 可拖拽 -->
  <div>
    <draggable
      v-model="list"
      handle='.drag-handle'
      item-key="id"
      tag="transition-group"
      :component-data="{ name: 'fade' }"
    >
      <template #item="{ element, index }">
        <div>
          <div class="drag-handle">拖动手柄</div>
          <div class="drag-content">{{ element.name }}</div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import draggable from "@marshallswain/vuedraggable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, name: "qqqqqqqqqq" },
        { id: 2, name: "wwwwwwwwww" },
        { id: 3, name: "eeeeeeeeee" },
      ],
    };
  },
};
</script>

<style>
.drag-handle {
  cursor: grab;
}
</style>
